import { Component } from "react";
import './List.css'
// 引入发布订阅平台
import bus from "../../utils/bus";
class List extends Component{
    inputRef
    state = {
        todoList: [
            {
              name: "打篮球",
              state: true, //true 为已完成  //false 为未完成
            },
            {
              name: "玩游戏",
              state: false,
            },
            {
              name: "学习",
              state: false,
            },
            {
              name: "写代码",
              state: false,
            },
          ],
        // 定义当前选中的nav 0表示所有任务 1表示已完成任务 2 表示未完成任务
        navIndex:0
    }
    render(){
        let {todoList,navIndex} = this.state;
        return ( <div>
            {
                navIndex===0 && todoList.map((item,index)=>{
                    return (
                        <div key={index} className='item'>
                            {
                                !item.state && <input type="checkbox" onClick={()=>this.changeState(item.name)}/>
                            }
                            {
                                item.state &&  <span className="orver" onClick={()=>this.clearOver(item.name)}>已完成</span>
                            }
                             {item.name}
                            <span className="close" onClick={()=>this.remove(item.name)}>❌</span>
                        </div>
                    )
                })
            }
            {
                navIndex===1 && todoList.filter(item=>{
                    return item.state
                }).map((item,index)=>{
                    return (
                        <div key={index} className='item'>
                        {
                            !item.state && <input type="checkbox" onClick={()=>this.changeState(item.name)}/>
                        }
                        {
                            item.state &&  <span className="orver" onClick={()=>this.clearOver(item.name)}>已完成</span>
                        }
                         {item.name}
                        <span className="close" onClick={()=>this.remove(item.name)}>❌</span>
                    </div>
                    )
                })
            }
            {
                navIndex === 2 && todoList.filter(item=>{
                    return !item.state
                }).map((item,index)=>{
                    return (
                        <div key={index} className='item'>
                        {
                            !item.state && <input type="checkbox" onClick={()=>this.changeState(item.name)}  checked={item.state} onChange={(e)=>{
                                console.log(e.target.value)
                            }}/>
                        }
                        {
                            item.state &&  <span className="orver">已完成</span>
                        }
                         {item.name}
                        <span className="close" onClick={()=>this.remove(item.name)}>❌</span>
                    </div>
                    )
                })
            }
        </div>
        )
    }
    componentDidMount(){
        // 订阅事件
        bus.on("getIndex",(index)=>{
            console.log(index)
            this.setState({
                navIndex:index
            })
        })
        bus.on("getValue",(obj)=>{
            console.log(obj)
            this.state.todoList.push(obj);
            this.setState({
                todoList:this.state.todoList
            })
        })
    }
    changeState(name){
        // alert(name)
        // 根据当前点击的 名称查询对应todoList中的索引
        let {todoList} = this.state;
        let index = todoList.findIndex((item)=>{
            return item.name ===name;
        })
        todoList[index].state = true;
        this.setState({
            todoList:todoList
        })
    }
    remove(name){
        let {todoList} = this.state;
        let index = todoList.findIndex((item)=>{
            return item.name ===name;
        })
        todoList.splice(index,1)
        this.setState({
            todoList:todoList
        })
    }
    clearOver(name){
        let {todoList} = this.state;
        let index = todoList.findIndex((item)=>{
            return item.name ===name;
        })
        todoList[index].state = false;
        this.setState({
            todoList:todoList
        })
    }
}

export default List;